<div class="pull-right">
	<?php
	if ($this -> Paginator -> counter('{:pages}') > 1) {
		echo $this -> element('paginationUser', array('Paginator' => $this -> Paginator));
	}
	?>
</div>
				<div id="tileContainer" class="" style="width: 2389.5px; height: 345px; display: block;">
            		<img id="arrowLeft" class="navArrows" src="/themes/theme_default/img/primary/arrowLeft.png" onclick="javascript:$group.goLeft();" alt="left arrow">
            		<img id="arrowRight" class="navArrows" src="/themes/theme_default/img/primary/arrowRight.png" onclick="javascript:$group.goRight();" alt="right arrow">
       		    	<!--<a href="#" id="groupTitle0" class="groupTitle" style="margin-left: 0px; margin-top: 0px; display: block; opacity: 1;" onclick="javascript:$group.goTo(0);">
       		    	 	<h3>Home</h3>
       		    	</a>
        			<a href="#&amp;second-tilegroup" id="groupTitle1" class="groupTitle" style="margin-left: 620px; margin-top: 0px; display: block; opacity: 1;" onclick="javascript:$group.goTo(1);"><h3>Supported</h3></a>
        			<a href="#&amp;def" id="groupTitle2" class="groupTitle" style="margin-left: 1240px; margin-top: 0px; display: block; opacity: 1;" onclick="javascript:$group.goTo(2);"><h3>Contact</h3></a>
      			-->
      				<?php $i=0; foreach($data as $item){?>
      					
      					<a href="#&amp;def" id="groupTitle<?php echo $i; ?>" class="groupTitle" style="margin-left: <?php echo 620*$i;?>px; margin-top: 0px; display: block; opacity: 1;" onclick="javascript:$group.goTo(<?php echo $i; ?>);"><h3><?php echo $item['Product']['name'];?></h3></a>
  					<?php $i++; }?>
  					
  					
  					<?php $i=0; foreach($data as $item){?>
  					
      				<!-- BEGIN HOME-->
    				<!-- BEGIN Hinh vuong slideshow -->
      				<a id="tileSlideshow<?php echo $i;?>-0-1" class="tile tileSlideshow group<?php echo $i;?> noClick" style="margin-top: 45px; margin-left: <?php echo 620*$i;?>px; width: 300px; height: 300px; display: block; opacity: 1; background: rgb(105, 80, 171);" data-pos="200-0-145" data-n="0"> 
				    	<div class="imgWrapperBack">
				    		<img src="/<?php echo $item['Product']['img1'];?>" alt="">
				    	</div>
						<div class="imgWrapper">
							<img src="/<?php echo $item['Product']['img2'];?>" alt="">
						</div>
				    	<script>slideshowTiles["tileSlideshow<?php echo $i;?>-0-1"] = [["/<?php echo $item['Product']['img1'];?>","/<?php echo $item['Product']['img2'];?>"],[],[],"slide-right",5000]</script>
				    
				    	<img id="sl_arrowRight" src="/img/arrows/simpleArrowRight.png" alt="Slideshow - right">
				    	<img id="sl_arrowLeft" src="/img/arrows/simpleArrowLeft.png" alt="Slideshow - left" style="opacity: 0.4;">
				    	<div class="tileLabelWrapper bottom">
				    	</div> 
				    </a>
				    <!-- END Hinh vuong slideshow -->
				    <!-- BEGIN Hinh vuong liteVersion -->
      				<a href="/detail/<?php echo $item['Product']['shortLink'];?>" id="tileScroll<?php echo $i;?>_1-1" class="tile tileScroll group<?php echo $i;?>" style="margin-top: 200px; margin-left: <?php echo 620*$i+310;?>px; width: 145px; height: 145px; display: block; opacity: 1; background: rgb(255, 128, 0);" data-pos="200-155-300"> 
    					<div class="tileTitle" style="margin-left:10px;">Mô tả</div>
						<div class="divScroll">Hướng dẫn cài đặt</div>
    					<script>scrollTile("<?php echo $i;?>_1-1",["Hướng dẫn chi tiết","Thảo luận của các thành viên","Kết nối thành viên"],2500,0)</script>
        			</a>
        			<!-- END Hinh vuong liteVersion -->
					<!-- BEGIN Hinh vuong Example -->
    				<a href="<?php echo $item['Product']['linkApp'];?>" class="tile tileCenteredSlide left group<?php echo $i;?> " style="margin-top: 45px; margin-left: <?php echo 620*$i+310;?>px; width: 145px; height: 145px; opacity: 1; display: block; background-image: url(/<?php echo $item['Product']['icon'];?>); background-color: rgb(238, 238, 238);" data-pos="45-0-300"> 
    				</a>
    				<!-- END Hinh vuong Example -->
					<!-- BEGIN hinh chu nhat gap khuc -->
					<!--<a href="http://www.youtube.com/watch?v=<?php echo $item['Product']['youtubeId'];?>" target="_blank" class="tile tileSlideFx group<?php echo $i;?>" style="margin-top: 355px; margin-left: <?php echo 620*$i;?>px; width: 300px; height: 200px; opacity: 1; display: block; background: rgb(51, 51, 51);" data-pos="200-0-300"> 
						<div class="slideText" style="">Ghi gì đây</div>
						<div class="tileLabelWrapper bottom">
						</div> 
   
    					<div class="slice s1" style="width: 75px; background-image: url(/img/youtube.jpg);"><span class="overlay" style="width:75px;"></span>					
	    					<div class="slice s2" style="width: 75px; background-image: url(/img/youtube.jpg); background-position: -75px 0px;"><span class="overlay" style="width:75px;"></span>					
		    					<div class="slice s3" style="width: 75px; background-image: url(/img/youtube.jpg); background-position: -150px 0px;"><span class="overlay" style="width:75px;"></span>	
			    					<div class="slice s4" style="width: 75px; background-image: url(/img/youtube.jpg); background-position: -225px 0px;"><span class="overlay" style="width:75px;"></span></div>
		    					</div>
	    					</div>
    					</div>
					</a>-->
					<div class="tile tileSlideFx group<?php echo $i;?>" style="margin-top: 355px; margin-left: <?php echo 620*$i;?>px; width: 455px; height: 250px; opacity: 1; display: block; background: rgb(51, 51, 51);" data-pos="200-0-300">
						<object width="450" height="250"
							data="http://www.youtube.com/v/<?php echo $item['Product']['youtubeId'];?>">
						</object>
					</div>
					<!-- END hinh chu nhat gap khuc -->
					<!-- END HOME-->
					<?php $i++; }?>
					<!-- BEGIN SECOND -->
				    <!-- <a href="#windows_phone" target="_blank" class="tile tileFlip horizontal support3D group2" style="margin-top: 45px; margin-left: 620px; width: 145px; height: 145px; display: block; opacity: 1;" data-pos="45-465-145"> 
					    <div class="flipContainer">
							<div class="flipFront" style="background:#E87C00;">
					        	<div class="flipImgWrapper">
					        		<div class="flipImgCenterer">
					        			<img src="img/icons/wp.png" style="width:147px;">
					       			</div>
					        	</div>
					        </div>
							<div class="flipBack" style="background:#E87C00;">
								<h5><span style="font-size:22px;">Windows Phone</span></h5>
							</div>
			        	</div>
				    </a>
				     <a href="https://play.google.com/store/apps/developer?id=truongmy.com" class="tile tileFlip horizontal support3D group2" style="margin-top: 45px; margin-left: 775px; width: 145px; height: 145px; display: block; opacity: 1;" data-pos="45-465-145"> 
					    <div class="flipContainer">
							<div class="flipFront" style="background:#E87C00;">
					        	<div class="flipImgWrapper">
					        		<div class="flipImgCenterer">
					        			<img src="/img/icons/android.png" style="width:147px;">
					       			</div>
					        	</div>
					        </div>
							<div class="flipBack" style="background:#E87C00;">
								<h5><span style="font-size:22px;">Android</span></h5>
							</div>
			        	</div>
				    </a> -->
    				<!-- END SECOND-->

    				<!-- BEGIN THIRD -->
    				<!-- BEGIN Hinh vuong dau tien -->
			    	<!-- <a href="#!/contact" class="tile tileFlip horizontal group2  support3D" style="margin-top: 45px; margin-left: 1240px; width: 145px; height: 145px; opacity: 1; display: block;" data-pos="200-1705-145"> 
    					<div class="flipContainer">
							<div class="flipFront" style="opacity: 1; background: rgb(222, 163, 23);">
                				<div class="flipImgCenterer">
        							<img src="/img/icons/mail.png" alt="" title="" style="width:103.5px;">
        						</div>
        					</div>
							<div class="flipBack" style="background:#dea317;">
								<h5><span style="font-size:22px;">Contact me</span></h5>
							</div>
						</div>
    				</a> -->
			    	<!-- END Hinh vuong dau tien -->
    				<!-- END THIRD -->
            	</div> 
                <div id="subNavWrapper" style="display: none;"></div>
    			<div id="contentWrapper" style="display: none;">   		    
   		            <div id="content">	        	
				        </div>
	    		</div>